<template>
    <div class="wrapper">
        <header>
            <p>支付页面</p>
        </header>
        </div>
        <div id="timeout"></div>
        <div class="ordersInformation">
            订单号：{{ out_trade_no }},应支付金额：{{ total_fee }}
        </div>
       
    
    <div id="qrcode" ></div>
    <Footer></Footer>
</template>
<style>
.ordersInformation{
    margin-top: 50px;
    font-size: 30px;
    width: 100%;
}
#qrcode{
    margin-top: 30px;
    margin-left: 300px;
}

</style>
<script>
import QRCode from 'qrcodejs2';

export default{
    name: 'payQrcode',
    data(){
     return{
       payAddress:'',
        total_fee: this.$route.query.total_fee,
        orderId:this.$route.query.orderId,
        out_trade_no:'',
        user:{},
       businessName:this.$route.query.businessName
     }
    },
    created(){
        this.user = this.$getSessionStorage("user");

        this.$axios.post('pay/createNative',this.$qs.stringify({
               total_fee: this.total_fee
        })).then(response =>{
         this.payAddress =response.data.qrcode
         this.out_trade_no= response.data.out_trade_no
        
         this.queryPayStatus();
         this.qrcode();

        })
    },
    methods:{
        qrcode(){
            let qrcode = new QRCode('qrcode' ,{
                width: 200,
                height : 200,
                text: this.payAddress,
                
            })
        },
        queryPayStatus(){
            this.$axios.post('pay/queryPayStatus',this.$qs.stringify({
                out_trade_no:this.out_trade_no
            })).then(response =>{
                if(response.data.success){
                    this.insertPayLog();
                    this.updateOrderStatuesById();
                    this.$router.push({path:'/paySuccess',query:{total_fee:this.total_fee}});
                  
                }else{
                    if(response.data.message =='二维码超时'){
                        alert('二维码已过期，刷新页面重新获取二维码');
                        document.getElementById('qrcode').innerHTML='';
                        this.qrcode();
                    }else{
                        this.$router.push({path:'/payFail'});
                    }
                }
            })
        },
        
        // time(){
        //    let count=0;
        //    setInterval(()=>{
        //     console.log("开启");
        //     count++;
        //     if(count%10===0){
        //         document.getElementById('qrcode').innerHTML='';
        //         this.qrcode();
        //     }
        //    },1000)

        // },
        updateOrderStatuesById(){
            this.$axios.post('OrdersController/updateOrderStateByOrderId',this.$qs.stringify({
                orderId: this.orderId
            })).then(response =>{
                if(response.data>0){
                    console.log("修改订单状态为支付成功");
                    
                }else{
                    console.log("修改订单状态为已支付失败");
                }
            })
        },
        insertPayLog(){
           this.$axios.post('PayLogController/savePayLog',this.$qs.stringify({
            userId: this.user.userId,
            payTime : new Date().toLocaleDateString(),
            paymoney: this.total_fee,
            businessName:this.businessName,
            orderId: this.orderId
           })) 
        }
    }
}
</script>